<template>
  <div class="Stationierung">
    <div class="board">
      <div class="boardLeft">
        <div>
          <span class="word">住院号</span>
          <span class="Admission">478900</span>
        </div>
        <div>
          <span class="word">出院时间</span>
          <span>2022/05/23 09:00:00</span>
        </div>
        <div>
          <span class="word">开单时间</span>
          <span>2020/10/09 09:00:00</span>
        </div>
        <div>
          <span class="word">费用明细</span>
          <span>600￥</span>
        </div>
      </div>
      <div class="boardCentre">
        <div>
          <span class="word">住院状态</span>
          <span>住院中</span>
        </div>
        <div>
          <span class="word">院区</span>
          <span class="campus">北京市第一人民医院-东院区</span>
        </div>
        <div>
          <span class="word">开单医生</span>
          <span>王克</span>
        </div>
      </div>
      <div class="boardBelow">
        <div>
          <span class="word">入院时间</span>
          <span>2020/10/09 09:00:00</span>
        </div>
        <div>
          <span class="word">住院科室</span>
          <span>综合住院部</span>
        </div>
      </div>
    </div>
    <div class="below">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :cell-style="{ 'text-align': 'center' }"
        :header-cell-style="{ 'text-align': 'center', background: '#e8f2ff' }"
      >
        <el-table-column prop="ids" label="序号" />
        <el-table-column prop="category" label="项目类别" />
        <el-table-column prop="name" label="项目名称" />
        <el-table-column prop="unitPrice" label="单价(元)" />
        <el-table-column prop="nums" label="数量" />
        <el-table-column prop="money" label="小计(元)" />
      </el-table>
    </div>
  </div>
</template>

<script setup>
const tableData = [
  {
    ids: "1",
    category: "西药费",
    name: "普罗布考片",
    unitPrice: "50.00",
    nums: "2",
    money: "100.00",
  },
];
</script>

<style lang="scss">
.Stationierung {
  width: 100%;
  height: 600px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  .Admission {
    padding-left: 15px;
  }
  .campus {
    padding-left: 30px;
  }
  .word {
    color: #b2aabd;
  }
  //上部分
  .board {
    box-sizing: border-box;
    height: 50%;
    display: flex;
    flex-direction: row;
    .boardLeft {
      width: 26%;
      margin-left: 3%;
      span {
        margin: 0px 35px;
      }
      div {
        margin: 45px 0px;
      }
    }
    .boardCentre {
      width: 27%;
      margin-left: 9%;
      span {
        margin: 0px 35px;
      }
      div {
        margin: 45px 0px;
      }
    }
    .boardBelow {
      width: 25%;
      margin-left: 6%;
      span {
        margin: 0px 35px;
      }
      div {
        margin: 45px 0px;
      }
    }
  }
  .below {
    box-sizing: border-box;
    height: 50%;
    width: 95%;
    margin-left: 3.1%;
  }
}
</style>